<!--  -->
<script setup>
import { nextTick, ref } from 'vue'

const menu = ref(null)
const show = ref(false)

const ShowMenu = () => {
  show.value = true
  
  nextTick(() => {
    const parentRect = menu.value.parentElement.getBoundingClientRect()
    const menuRect = menu.value.getBoundingClientRect()

    if (parentRect.left > window.innerWidth - parentRect.right) {
      menu.value.style.left = -menuRect.width + 'px'
    } else {
      menu.value.style.left = parentRect.width + 'px'
    }
    
    if (menuRect.height / 2 < parentRect.top) {
      menu.value.style.top = -menuRect.height / 2 + parentRect.height / 2 + 'px'
    }
  })
}

const HideMenu = () => {
  show.value = false
}
</script>

<template>
  <div class="menu-wrapper">
    <div class="trigger-el" @click="ShowMenu" @mouseleave="HideMenu">
      <slot name="icon"></slot>
      <Transition name="ani">
        <div ref="menu" class="dropdown-container" @click.stop="HideMenu" v-show="show">
          <slot name="content"></slot>
        </div>
      </Transition>
      </div>
  </div>
</template>

<style scoped lang="scss">
.menu-wrapper {

  .trigger-el {
    height: 100%;
    cursor: pointer;
    position: relative;
    margin-top: auto;
    display: flex;
  }

  .dropdown-container {
    position: absolute;
    top: 0px;
    z-index: 100;
    background-color: var(--bgc-04);
    border: 1px solid var(--border-secondary);
    box-shadow: -2px 4px 4px rgba(0, 0, 0, 0.357);
    transition: opacity .15s ease-out;
  }
}

.ani-enter-active,
.ani-leave-active {
  transition: opacity .15s ease-out;
}

.ani-enter-from,
.ani-leave-to {
  opacity: 0;
}
</style>
